<template>
  <div class="home-page-content">
    <h3>系统访问日志</h3>
    <div class="mt-20">
      <Form ref="formData" :model="formData">
        <Row :gutter="30">
          <Col span="18">
            <FormItem prop="timer">
              <DatePicker
                :value="formData.timer"
                type="daterange"
                placement="bottom-end"
                placeholder="请选择时间区间"
                style="width: 100ppx"
                @on-change="timerChange"
              ></DatePicker>
            </FormItem>
          </Col>
          <Col span="6">
            <div class="action-search-btn">
              <Button
                :loading="isClearLoading"
                type="primary"
                @click="clearLog()"
                >清除</Button
              >
              <Button icon="md-search" type="primary" @click="queryList()"
                >查询</Button
              >
              <BtnPlain
                type="primary"
                icon="md-refresh"
                @click="handleReset('formData')"
              >
                <Icon type="md-refresh" />
                <span>重置</span>
              </BtnPlain>
            </div>
          </Col>
        </Row>
      </Form>
    </div>
    <Table :columns="columns" :data="listData" :loading="isLoading"> </Table>
    <PageAtion
      v-if="total"
      :total="total"
      :size.sync="formData.size"
      :page.sync="formData.page"
      @pageSizeChange="pageSizeChange"
    />
  </div>
</template>

<script type="text/javascript">
import { systemAccessLog, clearSystemAccessLog } from "@/api/logManage.js";

export default {
  name: "systemAccessLog",
  data() {
    return {
      formData: {
        page: 1,
        size: 10,
        timer: [],
        beginTime: "",
        endTime: "",
      },
      columns: [
        {
          title: "访问用户",
          key: "createUserName",
          width: 120,
        },
        {
          title: "访问url",
          key: "url",
        },
        {
          title: "类名",
          key: "className",
        },
        {
          title: "方法名",
          key: "packageName",
        },
        {
          title: "执行时长",
          key: "executionTime",
          width: 120,
        },
        {
          title: "参数",
          key: "params",
        },
        {
          title: "访问时间",
          key: "createlateTime",
          width: 180,
        },
      ],
      listData: [],
      isLoading: false,
      total: 0,
      isClearLoading: false,
    };
  },
  methods: {
    timerChange(ev) {
      this.formData.beginTime = ev[0];
      this.formData.endTime = ev[1];
    },
    async systemAccessLogData() {
      this.isLoading = true;
      let data = await systemAccessLog(this.formData);
      this.listData = data.data;
      this.isLoading = false;
      this.total = data.total;
      console.log(data, "data");
    },
    async clearLog() {
      this.isClearLoading = true;
      let { beginTime, endTime } = this.formData;
      let params = { beginTime, endTime };
      let data = await clearSystemAccessLog(params);
      this.isClearLoading = false;
      this.$Message.success("清除成功");
      this.handleReset("formData");
    },
    queryList() {
      this.formData.page = 1;
      this.systemAccessLogData();
    },
    pageSizeChange(row) {
      this.systemAccessLogData();
    },
    handleReset(name) {
      this.formData.beginTime = "";
      this.formData.endTime = "";
      this.listData = [];
      this.$refs[name].resetFields();
      this.systemAccessLogData();
    },
  },
  mounted() {
    this.systemAccessLogData();
  },
};
</script>

<style lang="less" scoped>
.search-input {
  width: 300px;
  margin-right: 20px;
}

.mt-20 {
  margin-top: 20px;
}
.action-search-btn {
  margin-top: 0 !important;
}
</style>
